<template>
  <view
    style="border: 1px solid #dadada; border-radius: 5px; display: flex"
    :style="{
      backgroundColor: disabled ? '#f5f7fa' : '#fff'
    }"
  >
    <textarea
      :type="type"
      style="width: 100%; height: 90px; margin: 3px 5px; padding: 10rpx"
      v-model="internalValue"
      @blur="onBlur($event)"
      @input="onInput($event)"
      :disabled="disabled"
      :placeholder="placeholder"
      :maxlength="maxlength"
    ></textarea>
  </view>
</template>
<script>
export default {
  name: 'LiTextarea',
  props: {
    value: {},
    type: {
      type: String,
      default: 'text'
    },
    rule: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    maxlength: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', this.internalValue);
    },
    onBlur(event) {
      switch (this.rule) {
        case 'trim':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = this.internalValue.trim();
          }
          break;
        case 'trimEnd':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = this.internalValue.trimEnd();
          }
          break;
        case 'int':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseInt(this.internalValue)) ? 0 : parseInt(this.internalValue);
          }
          break;
        case 'intOrNull':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseInt(this.internalValue)) ? null : parseInt(this.internalValue);
          }
          break;
        case 'intOrEptStr':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseInt(this.internalValue)) ? '' : parseInt(this.internalValue);
          }
          break;
        case 'float':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseFloat(this.internalValue)) ? 0 : parseFloat(this.internalValue);
          }
          break;
        case 'floatOrNull':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseFloat(this.internalValue)) ? null : parseFloat(this.internalValue);
          }
          break;
        case 'floatOrEptStr':
          if (this.internalValue != null && this.internalValue != undefined) {
            this.internalValue = isNaN(parseFloat(this.internalValue)) ? '' : parseFloat(this.internalValue);
          }
          break;

        case 'bool':
          this.internalValue = this.internalValue ? true : false;
          break;
      }

      this.$emit('input', this.internalValue);
      this.$emit('blur', {
        currentTarget: {
          id: this.prop
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.disabled {
  background-color: #f5f7fa;
}
</style>
